<%= render "individual_article", article: @article %>


<script>
  function timeNow(objectID){
    var seconds = new Date().getTime() / 1000;
    document.getElementById("featured_number_"+objectID).value = Math.round(seconds);
  }
  function sink(objectID){
    var seconds = new Date().getTime() / 1080;
    document.getElementById("featured_number_"+objectID).value = Math.round(seconds);
  }

  $('.row').on("submit", "form", function() {
    var form = $(this);
    var valuesToSubmit = $(this).serialize();
    $.ajax({
        type: "POST",
        url: $(this).attr('action'), //sumbits it to the given url of the form
        data: valuesToSubmit,
        // dataType: "JSON" // you want a difference between normal and ajax-calls, and json is standard
    }).success(function(json){
      console.log("success")
      form.parents(".row").addClass("highlighted-bg")
      form.parents(".row").addClass("highlighted-border")
      setTimeout(function(){
        form.parents(".row").removeClass("highlighted-bg")
      },350)
    });
    return false; // prevents normal behaviour
  });

  document.getElementById('image-upload-button').onclick = function (e) {
    e.preventDefault();
    document.getElementById('image-upload').click();
  }

  document.getElementById('image-upload').onchange = function (e) {
    var image = document.getElementById('image-upload').files;
    if (image.length > 0) {
      document.getElementById('image-upload-file-label').style = 'color:#888888';
      document.getElementById('image-upload-file-label').innerHTML = "Uploading...";
      document.getElementById('uploaded-image').style = 'display:none';
      document.getElementById('image-upload-submit').value = "uploading";
      setTimeout(function(){
        document.getElementById('image-upload-submit').click(function(){
        });
      },50)
    }
  }

  document.getElementById('image-upload-submit').onclick = function (e) {
    e.preventDefault();
    var image = document.getElementById('image-upload').files;
    if (image.length > 0) {
      var ajaxReq = createAjaxReq();
      ajaxReq.onreadystatechange = uploadImageCb.bind(this, ajaxReq);
      ajaxReq.open('POST', '/image_uploads', true);
      ajaxReq.send(generateUploadFormdata(image));
    }
  }

  function generateUploadFormdata(image) {
    var token = document.getElementsByName('authenticity_token')[0].value;
    var formData = new FormData();
    formData.append('authenticity_token', token);
    formData.append('image', image[0]);
    return formData;
  }

  function uploadImageCb(ajaxReq) {
    if (ajaxReq.status === 200 && ajaxReq.readyState === XMLHttpRequest.DONE) {
      var address = document.getElementById('uploaded-image');
      address.value = JSON.parse(ajaxReq.response).link;
      address.style.display = "inline-block";
      address.style.width = "90%";
      address.select();
      var uploadedMessage = '';
      document.getElementById('image-upload-file-label').innerHTML = uploadedMessage;
      document.getElementById('image-upload-file-label').style.color = '#00c673';
      document.getElementById('image-upload-submit').style.display = 'none';
    }
  }

  function createAjaxReq() {
    if (window.XMLHttpRequest) {
       return new XMLHttpRequest();
    } else {
       return new ActiveXObject("Microsoft.XMLHTTP");
    }
   }
</script>
